<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入外部样式取出百度的下划线-->
    <link rel="stylesheet" href="./index.css">
</head>
<!--首先要去掉下划线-->
<style>
    body{
        text-align: center;
    }
    /*根据效果图设置百度按钮，从大到小(大小，字体颜色)*/
    .btn{
        width: 108px;
        height: 44px;
        background-color: #4e6ef2;
        color: #fff;
        line-height: 44px;/*设置成和高度一样大小就会自动居中*/
        text-align: center;/*文本自动居中*/
        border-radius: 0 10px 10px 0;
        font-size: 20px;
        /*margin: 0 auto;仅对块级元素生效,行内块元素居中要设置父元素text-align*/
    }
    .btn:hover{
        background-color: orange;
    }
</style>
<body>
    <!--盒子模型元素案例，百度按钮实战练习,使用a标签-->
    <a href="https://www.baidu.com" class="btn">百度一下</a>
</body>
</html>